<template>
  <el-row :gutter="20">
    <el-col :sm="2" class="hidden-xs-only" style="opacity:0;">左侧占位</el-col>
    <el-col :xs="24" :sm="20">
      <el-card style="background-color: rgba(255,255,255,0.9)" class="timeline-card">
        <div slot="header" class="total">
          <div class="titleIndex">
            <i class="el-icon-time"></i>
            <span>时间轴</span>
          </div>
        </div>
        <div class="timeline-container">
          <el-timeline>
            <el-timeline-item
              v-for="item in timelineList"
              :key="item.id"
              :timestamp="item.date"
              placement="top"
              :type="item.type"
              :icon="item.icon"
              size="large"
            >
              <el-card shadow="hover" class="timeline-item-card">
                <h4 class="timeline-title">{{ item.title }}</h4>
                <p class="timeline-content" v-html="item.content"></p>
                <div v-if="item.tags && item.tags.length > 0" class="timeline-tags">
                  <el-tag
                    v-for="tag in item.tags"
                    :key="tag"
                    size="mini"
                    type="info"
                    effect="plain"
                    class="tag-item"
                  >
                    {{ tag }}
                  </el-tag>
                </div>
                <div v-if="item.link" class="timeline-link">
                  <el-button type="text" @click="goToLink(item.link)">查看详情 →</el-button>
                </div>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-card>
    </el-col>
    <el-col :sm="2" class="hidden-xs-only" style="opacity:0;">右侧占位</el-col>
  </el-row>
</template>

<script>
export default {
  name: 'Timeline',
  data() {
    return {
      timelineList: [
        {
          id: 1,
          date: '2024-12-15',
          type: 'primary',
          icon: 'el-icon-edit',
          title: '发布新文章：Vue3 组合式API深度解析',
          content: '深入探讨Vue3组合式API的使用方法和最佳实践，包括setup函数、响应式API、生命周期钩子等内容。',
          tags: ['Vue', '前端', 'JavaScript'],
          link: '/cmsBlog?id=1'
        },
        {
          id: 2,
          date: '2024-12-10',
          type: 'success',
          icon: 'el-icon-trophy',
          title: '完成项目：博客系统重构',
          content: '使用Nuxt.js重构了博客系统，提升了性能和用户体验，增加了更多功能特性。',
          tags: ['Nuxt', 'Vue', '项目'],
          link: '/'
        },
        {
          id: 3,
          date: '2024-12-05',
          type: 'warning',
          icon: 'el-icon-star-on',
          title: '学习新技能：TypeScript高级特性',
          content: '学习了TypeScript的高级特性，包括泛型、装饰器、模块系统等，并在项目中实践应用。',
          tags: ['TypeScript', '学习'],
          link: null
        },
        {
          id: 4,
          date: '2024-11-28',
          type: 'info',
          icon: 'el-icon-document',
          title: '发布新文章：JavaScript异步编程实践',
          content: '分享了JavaScript异步编程的各种方法，包括Promise、async/await、Generator等。',
          tags: ['JavaScript', '异步编程'],
          link: '/cmsBlog?id=2'
        },
        {
          id: 5,
          date: '2024-11-20',
          type: 'primary',
          icon: 'el-icon-setting',
          title: '系统优化：数据库性能优化',
          content: '对博客系统的数据库进行了优化，包括索引优化、查询优化等，提升了系统性能。',
          tags: ['数据库', '优化'],
          link: null
        },
        {
          id: 6,
          date: '2024-11-15',
          type: 'success',
          icon: 'el-icon-user',
          title: '参加技术会议：前端技术分享会',
          content: '参加了前端技术分享会，与同行交流了最新的前端技术和开发经验。',
          tags: ['会议', '交流'],
          link: null
        },
        {
          id: 7,
          date: '2024-11-10',
          type: 'warning',
          icon: 'el-icon-present',
          title: '开源项目：发布新的工具库',
          content: '在GitHub上发布了一个新的前端工具库，获得了不错的关注度和使用反馈。',
          tags: ['开源', 'GitHub'],
          link: 'https://github.com'
        },
        {
          id: 8,
          date: '2024-11-05',
          type: 'info',
          icon: 'el-icon-reading',
          title: '发布新文章：React Hooks最佳实践',
          content: '总结了React Hooks的使用经验和最佳实践，包括useState、useEffect、useContext等。',
          tags: ['React', 'Hooks'],
          link: '/cmsBlog?id=3'
        }
      ]
    }
  },
  methods: {
    goToLink(link) {
      if (link.startsWith('http')) {
        window.open(link, '_blank')
      } else {
        this.$router.push(link)
      }
    }
  }
}
</script>

<style scoped>
.timeline-card {
  margin-top: 20px;
}

.titleIndex {
  display: flex;
  align-items: center;
  font-size: larger;
  font-weight: bold;
}

.titleIndex i {
  margin-right: 10px;
  color: #409eff;
  font-size: 20px;
}

.timeline-container {
  padding: 20px;
}

.timeline-item-card {
  margin-bottom: 10px;
  transition: all 0.3s;
}

.timeline-item-card:hover {
  transform: translateX(5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.timeline-title {
  margin: 0 0 10px 0;
  color: #303133;
  font-size: 18px;
  font-weight: bold;
}

.timeline-content {
  color: #606266;
  font-size: 14px;
  line-height: 1.6;
  margin: 10px 0;
}

.timeline-tags {
  margin-top: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-item {
  margin: 0;
}

.timeline-link {
  margin-top: 15px;
  text-align: right;
}

.timeline-link .el-button {
  color: #409eff;
  font-weight: bold;
}

.timeline-link .el-button:hover {
  color: #66b1ff;
}

@media screen and (max-width: 768px) {
  .timeline-container {
    padding: 10px;
  }
  
  .timeline-title {
    font-size: 16px;
  }
  
  .timeline-content {
    font-size: 13px;
  }
}
</style>

